<!--
 * @LastEditors: yuSeen
 * @LastEditTime: 2021-12-30 10:53:49
 * 天凉好个秋
-->
<template>
    <div class="routerBox no-drag">
        <div class="route-btn" :title="t('navbar.router.back')" @click="router.back()">
            <svgIcon
                name="back"
                size="12"
                fill="#fff"
                :class="['back', { 'unableClick': !canBack }]"
            ></svgIcon>
        </div>
        <div class="route-btn" :title="t('navbar.router.forward')" @click="router.forward()">
            <svgIcon
                name="back"
                size="12"
                fill="#fff"
                :class="['forward', { 'unableClick': !canForward }]"
            ></svgIcon>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { watch, ref, computed } from 'vue';
import { useRouter } from 'vue-router'
import { useI18n } from '@/hooks/locales/useI18N'

const router = useRouter()
const { t } = useI18n()

interface IRouterControl {
    back: string | null,
    forward: string | null
}

const routerControl = ref<IRouterControl>({
    back: '',
    forward: ''
})

watch(() => router.currentRoute.value, () => {
    const { back, forward } = router.options.history.state
    routerControl.value = {
        back,
        forward
    } as IRouterControl
})

const canBack = computed(() => routerControl.value.back !== null)

const canForward = computed(() => routerControl.value.forward !== null)


</script>

<style scoped lang='scss'>
.routerBox {
    @apply hidden justify-between md:flex;
    width: 56px;
    margin-left: 120px;
    .route-btn {
        @apply flex justify-center items-center bg-black bg-opacity-5 rounded-full;
        width: 25px;
        height: 25px;
    }
    .forward {
        transform: rotate(-180deg);
    }
    .unableClick {
        opacity: 0.5;
    }
}
</style>